<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="column col q-pr-sm">
        <q-card flat>
          <q-item v-if="topicInfo && !tagLaod">
            <q-item-section>
              <div class="row">
                <q-card class="q-ma-sm">
                  <q-item clickable class="rounded-borders">
                    <q-item-section>
                      <q-item-label class="text-primary">
                        {{ topicInfo.name }}
                      </q-item-label>
                      <q-item-label caption lines="1"> 导语: {{ topicInfo.remark }} </q-item-label>
                    </q-item-section>
                    <q-item-section side top>
                      <q-item-label caption> 关注数: {{ topicInfo.followNum }} </q-item-label>
                      <q-item-label caption> 阅读数: {{ topicInfo.readNum }} </q-item-label>
                    </q-item-section>
                  </q-item>
                </q-card>
              </div>
            </q-item-section>
            <q-item-section side>
              <div class="row items-center">
                <q-btn
                  :color="topicInfo.followFlag ? 'green-5' : 'light-blue-4'"
                  :label="topicInfo.followFlag ? '取关' : '关注'"
                  @click="
                    () => {
                      followTopic()
                    }
                  "
                />
              </div>
            </q-item-section>
          </q-item>
          <q-item v-if="tagLaod">
            <q-item-section>
              <q-card class="q-ma-sm w-200px">
                <q-item clickable class="rounded-borders">
                  <q-item-section>
                    <q-item-label> <q-skeleton type="text" /> </q-item-label>
                    <q-item-label caption lines="1">
                      <q-skeleton type="text" />
                    </q-item-label>
                  </q-item-section>
                  <q-item-section side top>
                    <q-item-label caption>
                      <q-skeleton type="text" />
                    </q-item-label>
                    <q-item-label caption>
                      <q-skeleton type="text" />
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </q-card>
            </q-item-section>
            <q-item-section side>
              <div class="row items-center">
                <q-skeleton type="QBtn" />
              </div>
            </q-item-section>
          </q-item>
        </q-card>

        <q-card flat class="q-mt-sm">
          <q-tabs
            align="left"
            dense
            v-model="pageParam.order"
            @update:model-value="
              (val) => {
                pageParam.order = val
                loadArticle()
              }
            "
            active-color="primary"
          >
            <q-tab name="read_num" label="最多阅读" />
            <q-tab name="edit_time" label="最近更新" />
          </q-tabs>
          <div class="absolute-right row items-center">
            <q-btn
              flat
              icon="refresh"
              @click="
                () => {
                  loadArticle()
                }
              "
            >
              <q-tooltip> 刷新 </q-tooltip>
            </q-btn>
          </div>
        </q-card>

        <q-card v-for="item in rows" :key="item.id" title="查看博客" class="q-mt-sm" flat>
          <ItemArticle :item="item"></ItemArticle>
        </q-card>

        <div class="q-mt-sm" v-show="loading">
          <SkeletonArticle></SkeletonArticle>
        </div>

        <q-card v-if="!loading && props.topicId && rows.length == 0" flat class="q-mt-sm">
          <q-card-section class="text-center dark:bg-neutral-700">
            <div
              class="h-xs w-full bg-contain bg-center bg-no-repeat"
              style="background-image: url('images/no-data.svg')"
            ></div>
            <div class="text-base">此话题下暂无文章~~</div>
          </q-card-section>
        </q-card>
        <div
          class="q-pt-sm full-width row flex-center"
          v-show="!loading && pageParam.totalPage > 1"
        >
          <div>共 {{ pageParam.recordCount }} 篇文章</div>
          <q-pagination
            @update:model-value="
              (value) => {
                pageParam.pageNum = value
                loadArticle()
              }
            "
            v-model="pageParam.pageNum"
            :max="pageParam.totalPage"
            :max-pages="6"
            direction-links
          />
        </div>
        <q-space />
      </div>
      <div class="col-3 gt-xs">
        <div class="sticky" :style="'top: ' + webStore.topVal">
          <div><HotArticleCard></HotArticleCard></div>
          <div class="q-mt-sm"><HotTopicCard></HotTopicCard></div>
        </div>
      </div>
    </div>

    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import HotArticleCard from 'src/components/HotArticleCard.vue'
import HotTopicCard from 'src/components/HotTopicCard.vue'
import SuspensionBtn from 'src/components/SuspensionBtn.vue'
import ItemArticle from 'src/components/ItemArticle.vue'
import { useWebStore } from 'src/stores/webStore'
import { onMounted, ref, watch } from 'vue'
import type { ApiType } from 'src/service/api'
import { globalFollowTopic, mainArticleList, mainTopicGet } from 'src/service/api'
import useBoolean from 'src/use/useBoolean'
import SkeletonArticle from 'src/components/SkeletonArticle.vue'
import { useYuan } from 'src/use'

const webStore = useWebStore()
const { Ok } = useYuan()
const props = withDefaults(
  defineProps<{
    topicId: string
  }>(),
  {
    topicId: '',
  },
)

type rowsType = ApiType<typeof mainArticleList>['Return']['rows'][0]

const rows = ref<Array<rowsType>>([])

const topicInfo = ref<ApiType<typeof mainTopicGet>['Return']>()

const pageParam = ref({
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  order: 'read_num',
  topicId: props.topicId || '-1',
})

watch(
  () => props.topicId,
  (newval) => {
    pageParam.value.topicId = newval || '-1'
    loadTag()
    loadArticle()
  },
)

const { bool: loading, setTrue: startLoad, setFalse: stopLoad } = useBoolean()
const { bool: tagLaod, setTrue: tagStartLoad, setFalse: tagStopLoad } = useBoolean()

onMounted(() => {
  loadTag()
  loadArticle()
})

const loadTag = async () => {
  tagStartLoad()
  const { data, error } = await mainTopicGet({ id: props.topicId })
  tagStopLoad()
  if (!error) {
    topicInfo.value = data
  }
}

const loadArticle = async () => {
  rows.value = []
  startLoad()
  const { data, error } = await mainArticleList(pageParam.value)
  stopLoad()
  if (!error) {
    pageParam.value.totalPage = data.totalPage
    pageParam.value.recordCount = data.recordCount
    rows.value = data.rows
  }
}

const followTopic = () => {
  if (topicInfo.value) {
    globalFollowTopic({ topicId: topicInfo.value.id }).then(({ data, error }) => {
      if (!error) {
        if (topicInfo.value) {
          topicInfo.value.followFlag = data
        }
        Ok(data ? '关注成功' : '取关成功')
      }
    })
  }
}
</script>

<style scoped></style>
